<template>
    <div class="center-box class-box dl-row-sb start mar-top mar-bottom">
        <div class="left main-box dl-sticky">
            <div v-for="(item, index) in tabBars" :key="index" class="w-[100%] py-3 px-10 cursor-pointer"
                 :class="tabIndex === index ? 'bg-blue-500 text-white' : ''" @click="handleTabClick(item, index)">
                <span>{{ item.name }}</span>
            </div>
        </div>
        <div class="right">
            <template v-if="tabIndex === 0">
				<div  v-loading="loading">
					<div class="main-box" style="position: relative; padding-top: 75px;">
					    <div class="dl-row center tab-box tab-box-first mar-bottom-20" :class="showType?'tab-active':''"
					         style="" @mouseover="showDetails(true)" @mouseout="showDetails(false)">
					        <div v-for="(item,index) in recommendTag" :key="index" class=""
					             @click="recommendChange2(index,item)">
					            <span class="cursor-pointer pb-1" :class="recommendIndex2===index?'act-item':''">{{item.label}}</span>
					        </div>
					    </div>
					    <div class="condition-box">
					        <div class="item start">
					            <h1>系列专业:</h1>
					            <ul class="dl-row center">
					                <li v-for="(specialty,index) in subSpecialty" :key="index"
					                    :class="subIndex===index?'active':''" @click="subClick(index,specialty)"><a>{{specialty.label}}</a>
					                </li>
					            </ul>
					        </div>
					    </div>
					</div>
					<div class="dl-row-sb tk-box">
					    <div class="item tk01">
					        <h1 @click="openPractice(true)">随机练习</h1>
					    </div>
					    <div class="item tk02">
					        <h1 @click="manyErrorView">高频错题</h1>
					    </div>
					    <div class="item tk03">
					        <h1 @click="openPractice(false)">自定义练习</h1>
					    </div>
					    <div class="item tk04" @click="routeClickSeatch()">
					        <h1>搜索试题</h1>
					    </div>
					</div>
					<h1 data-v-ab794cc4="" class="text-xl mar-top">题库</h1>
					<div class="ddp-main">
						<div v-if="bankList.length>0">
							<el-collapse v-model="activeNames" v-for="(bank,index) in bankList"
							             :key="index">
							    <el-collapse-item :title="bank.bankName" :name="index">
							        <ul class="ddp-box dl-row-sb">
							            <li class="dl-row-sb center dan">
							                <h1>单选题</h1>
							                <p>总数：{{bank.danxuan}}道</p>
							            </li>
							            <li class="dl-row-sb center duo">
							                <h1>多选题</h1>
							                <p>总数：{{bank.duoxuan}}道</p>
							            </li>
							            <li class="dl-row-sb center pan">
							                <h1>判断题</h1>
							                <p>总数：{{bank.panduan}}道</p>
							            </li>
							        </ul>
							    </el-collapse-item>
							</el-collapse>
						</div>
					    <div v-if="bankList.length==0 &&!loading">
							 <el-empty :image-size="250" :image="require('../../assets/no_data_images/no_bank.png')" class="empty" description="无题库数据"></el-empty>
						</div>
					</div>
				</div>
            </template>
            <template v-if="tabIndex === 1">
                <practice-record ref="prRecord"/>
            </template>
            <template v-if="tabIndex === 2">
                <bank-collect ref="bankColRef"/>
            </template>
            <template v-if="tabIndex === 3">
                <practice-error-question ref="prErrorQue"/>
            </template>
            <template v-if="tabIndex === 4">
                <practice-statistics ref="prStatis"/>
            </template>
        </div>
        <el-dialog title="选择题型" :visible.sync="typeQue" width="400px">
            <el-form ref="form" size="small" label-width="100px">
                <el-form-item label="单选题数量">
                    <el-input-number v-model.number="singleNum" style="width: 200px;" step-strictly :min="0" :max="50"
                                     controls-position="right" :disabled="isEdit"/>
                </el-form-item>
                <el-form-item label="多选题数量">
                    <el-input-number v-model.number="multipleNum" style="width: 200px;" step-strictly :min="0" :max="50"
                                     controls-position="right" :disabled="isEdit"/>
                </el-form-item>
                <el-form-item label="判断题数量">
                    <el-input-number v-model.number="judgeNum" style="width: 200px;" step-strictly :min="0" :max="50"
                                     controls-position="right" :disabled="isEdit"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="typeQue=false">取消</el-button>
                <el-button type="primary" @click="typePractice">确认</el-button>
            </div>
        </el-dialog>
		<bay-window></bay-window>
    </div>
</template>

<script>
    import {tree} from '@/api/specialty'
    import {getBank} from '@/api/bank'
    import practiceRecord from './components/practiceRecord'
    import bankCollect from './components/bankCollect'
    import practiceErrorQuestion from './components/practiceErrorQuestion'
    import practiceStatistics from './components/practiceStatistics'
	import bayWindow from '../../components/bayWindow';

    export default {
        components: {practiceRecord, bankCollect, practiceErrorQuestion,practiceStatistics,bayWindow},
        data() {
            return {
				loading:false,
                typeQue: false,
				isEdit:false,
                singleNum: 15,
                multipleNum: 5,
                judgeNum: 5,
                imageUrl: '',
                tabIndex: 0,
                activeName: 'all',
                recommendIndex2: 0,
                showType: false,
                activeNames: ['1'],
                tabBars: [
                    {
                        name: '题库'
                    },
                    {
                        name: '练习记录',
                    },
                    {
                        name: '收藏',
                    },
                    {
                        name: '错题集',
                    },
                    {
                        name: '练习数据',
                    }
                ],
                all: {id: '0', label: '全部', pid: '0', sort: 0, children: []},
                recommendTag: [],
                subIndex: 0,
                subSpecialty: [],
                parentZy: '',
                bankList: []
            }
        },
        created() {
            this.$nextTick(() => {
                this.getSpecialty()
                this.findBank()
            });
        },
        methods: {
            getSpecialty() {
				this.loading=true
                const params = {}
                tree(params).then(data => {
                    this.recommendTag = data
					this.getChildrens(data)
                    this.recommendTag.splice(0, 0, this.all)
                    // this.subSpecialty = []
                    // this.subSpecialty.splice(0, 0, this.all)
                })
				setTimeout(()=> {
					this.loading = false
				}, 500);
            },
			getFirstChildren(){
			},
			getChildrens(data){
				var nowData=data
				if(nowData.length>0){
					var list=[]
					for (let item of nowData) {
						list=list.concat(item.children)
					}
					this.subSpecialty = JSON.parse(JSON.stringify(list));
					this.subSpecialty.splice(0, 0, this.all)
				}
			},
            recommendChange2(index, item) {
                this.recommendIndex2 = index
				if(index==0){//全部
					this.getChildrens(this.recommendTag)
				}else{
					this.subSpecialty = []
					this.subSpecialty = JSON.parse(JSON.stringify(item.children));
					this.subSpecialty.splice(0, 0, this.all)
				}
                this.subIndex = 0
                this.parentZy = item.id
                this.findBank(item)
            },
            findBank(item) {
                let specialtyId = null
                if (item != null && item.id === '0' && this.parentZy != null && this.parentZy!=='0') {
					if(this.parentZy){
						specialtyId = this.parentZy
					}
                }else if (item != null && item.id !== '0') {
                    specialtyId = item.id
                }
				this.loading=true
                getBank(specialtyId).then(result => {
                    this.bankList = result.content
                })
				setTimeout(()=> {
					this.loading = false
				}, 500);
            },
            subClick(index, item) {
                this.subIndex = index;
                this.findBank(item)
            },
            handleTabClick(row, index) {
                this.tabs = row.tabs
                this.activeName = 'all'
                this.tabIndex = index
                if (this.tabIndex === 1) {
                    this.$nextTick(() => {
                        this.$refs.prRecord.init()
                    });
                }
                if (this.tabIndex === 2) {
                    this.$nextTick(() => {
                        this.$refs.bankColRef.init()
                    });
                }
                if (this.tabIndex === 3) {
                    this.$nextTick(() => {
                        this.$refs.prErrorQue.init()
                    });
                }
                if (this.tabIndex === 4) {
                    this.$nextTick(() => {
                        this.$refs.prStatis.init()
                    });
                }
            },
            openPractice(isEdit) {
              	this.typeQue=true;
              	this.isEdit=isEdit;
            },
            manyErrorView() {
                this.$router.push({
                    name: "manyErrorQue",
                })
            },
            typePractice() {
				if (this.bankList.length === 0) {
					this.$message.error(`暂无相应的题库可以练习！`)
					return
				}
                let bankIds = []
                if (this.bankList.length > 0) {
                    bankIds = this.bankList.map(item => item.id)
                }
                this.$router.push({
                    name: "practiceDetails",
                    params: {
                        bankList: bankIds,
                        singleNum: this.singleNum,
                        multipleNum: this.multipleNum,
                        judgeNum: this.judgeNum,
                    }
                })
            },
            showDetails(type) {
                if (type) {
                    this.showType = true
                } else {
                    this.showType = false
                }
            },
            routeClickSeatch() {
                this.$router.push({
                    path: "/bank/bankSearch",
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
	.center-box{
		 min-height: calc(100vh - 254px);
	}
	.condition-box {
	    padding: 30px 30px 30px 15px;
	}
	.condition-box .item h1{
		width: 70px;
	}
    .class-box {
        .left {
            width: 230px;
            padding: 25px 0;

            .bg-blue-500 {
                background: #0068B6;
            }

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }
        }

        .right {
            width: 1110px;
        }
    }

    .tab-box {
        margin-left: 20px;
    }

    .tk-box {
        margin-top: 40px;

        .item {
            width: 260px;
            height: 100px;
            border-radius: 12px;
            cursor: pointer;

            h1 {
                font-size: 20px;
                font-weight: bold;
                color: #0068B6;
                margin-left: 30px;
                line-height: 100px;
            }
        }

        .item:hover h1 {
            text-decoration: underline;
        }

        .tk01 {
            background: url("../../assets/image/tk01.png") no-repeat;
        }

        .tk02 {
            background: url("../../assets/image/tk02.png") no-repeat;
        }

        .tk03 {
            background: url("../../assets/image/tk03.png") no-repeat;
        }

        .tk04 {
            background: url("../../assets/image/tk04.png") no-repeat;
        }
    }

    .ddp-box {
        flex-wrap: wrap;
        //margin-top: 20px;
        li {
            background: #f6f6f6;
            width: 48.5%;
            margin-bottom: 30px;
            padding: 20px 30px;
            border-radius: 12px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #1A1A1A;
                margin-bottom: 5px;
            }

            p {
                font-size: 14px;
                color: #999999;
            }
        }

        .dan {
            background: #F3F8FB;
        }

        .duo {
            background: #FFF9ED;
        }

        .pan {
            background: #FFF5F5;
        }

        .dan:hover {
            background: #E3F3FF;
            cursor: pointer;
        }

        .dan:hover h1 {
            color: #0068B6;
        }

        .duo:hover {
            background: #FFF3DD;
            cursor: pointer;
        }

        .duo:hover h1 {
            color: #DC5F05;
        }

        .pan:hover {
            background: #FDE8E8;
            cursor: pointer;
        }

        .pan:hover h1 {
            color: #D82C2C;
        }
    }
</style>
